<template>
  <transition name="el-fade-in-linear">
    <div class="main-bg">
        <el-row >
          <el-col span="12">
            <el-form :model="data" ref="data">
            <div>
              <h4 class="p-tb10 center">移动端背景图 <el-tag size="mini"> tips:750x1334</el-tag>  <el-button size="mini" type="primary" @click="toAdd('data')">保 存</el-button></h4>
            </div>
            <div style="width:330px;">
              <el-upload  id="imageUpload"
                          action="string"
                          :show-file-list="false"
                          list-type="picture"
                          :before-upload="beforeAvatarUpload"
                          :on-remove="handleRemove"
                          :on-preview="handlePictureCardPreview"
                          :http-request="submitUpload">
                <img v-if="data.url" :src="proAPI.RESOURCE_URL+data.url"  class="avatar">
                <i v-else class="el-icon-plus avatar-uploader-icon avatar"></i>
              </el-upload>
            </div>
            </el-form>
          </el-col>
          <el-col span="12">
            <el-form :model="data1" ref="data1" >
            <div>
              <h4 class="p-tb10 center">PC端背景图<el-tag size="mini"> tips:1920x1080</el-tag>  <el-button size="mini" type="primary" @click="toAdd1('data1')">保 存</el-button></h4>
            </div>
            <div style="width:100%;">
              <el-upload  id="imageUpload1"
                          action="string"
                          :show-file-list="false"
                          list-type="picture"
                          :before-upload="beforeAvatarUpload"
                          :on-remove="handleRemove"
                          :on-preview="handlePictureCardPreview"
                          :http-request="submitUpload1">
                <img v-if="data1.url" :src="proAPI.RESOURCE_URL+data1.url"  class="avatarpc">
                <i v-else class="el-icon-plus avatar-uploader-icon avatar"></i>
              </el-upload>
            </div>
            </el-form>
          </el-col>
        </el-row>
    </div>
  </transition>
</template>
<script>
  export default {
    inject:["reload"],
    components: {
    },
    data() {
      return {
        isajax: false,
        data: {url:''},
        data1: {url:''},
        slide_h:document.body.offsetHeight - (204),
        loadingTxt: "",
        currentData: "",
      }
    },
    methods: {
      toAdd(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.$store.commit("saveLoadingMap", {"target": this.proAPI.URLS.saveClientBgImageInfo,id:this.target});
            this.proAPI.postJson(this.proAPI.URLS.saveClientBgImageInfo, {bgimg:this.data.url}).then((res) => {
              this.$message.success({
                "message": res.message
              })
              // this.$store.getters.getValForKey('sysConfig').clientBgImage = this.data.url;
              this.$store.commit("saveConfig",res.data);
              // this.reload();
            });
          } else {
            return false;
          }
        });
      },
      toAdd1(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.$store.commit("saveLoadingMap", {"target": this.proAPI.URLS.saveClientBgImageInfoPC,id:this.target});
            this.proAPI.postJson(this.proAPI.URLS.saveClientBgImageInfoPC, {bgimg:this.data1.url}).then((res) => {
              this.$message.success({
                "message": res.message
              })
              // this.$store.getters.getValForKey('sysConfig').clientBgImagePC = this.data1.url;
              this.$store.commit("saveConfig",res.data);
              // this.reload();
            });
          } else {
            return false;
          }
        });
      },
      beforeAvatarUpload(file) {
        const isJPG = file.type === 'image/jpeg';
        const isPNG = file.type === 'image/png';
        const isLt2M = file.size / 1024 / 1024 < 2;

        if (!isJPG&&!isPNG) {
          this.$message.error('图片格式只能是 JPG或者PNG 格式!');
        }
        if (!isLt2M) {
          this.$message.error('图片大小不能超过 2MB!');
        }
        return (isJPG||isPNG) && isLt2M;
      },
      submitUpload(item) {
        // console.log(item);
        let formData = new FormData()
        formData.append('file', item.file)
        this.$store.commit("saveLoadingMap", {"target": this.proAPI.URLS.uploadWebLogoImage,id:this.target});
        this.proAPI.postFile(this.proAPI.URLS.uploadWebLogoImage, formData).then(res => {
          this.data.url = res.data.imagePath;
        })
      },
      submitUpload1(item) {
        // console.log(item);
        let formData = new FormData()
        formData.append('file', item.file)
        this.$store.commit("saveLoadingMap", {"target": this.proAPI.URLS.uploadWebLogoImage,id:this.target});
        this.proAPI.postFile(this.proAPI.URLS.uploadWebLogoImage, formData).then(res => {
          this.data1.url = res.data.imagePath;
        })
      }
    },
    mounted() {
      setTimeout(()=>{
        this.data.url = this.$store.getters.getValForKey('sysConfig').clientBgImage;
        this.data1.url = this.$store.getters.getValForKey('sysConfig').clientBgImagePC;
      },200)
    },
    updated() {
      // console.log(333);
    },
    afterCreated() {

    }
  }
</script>
<style scoped>
  #imageUpload >>> .el-upload--picture{
    background-color: #fbfdff;
    border-radius: 6px;
    box-sizing: border-box;
  }

  .avatar{
    width:100%;
    height:100%;
  }
  .avatarpc{
    width:100%;
  }
</style>
